<template>
  <view class="index">
    <ugo-search></ugo-search>
    <view>
      <u-swiper
        :list="swiperList"
        name="image_src"
        height="340"
        :effect3d="true"
        bg-color="#ffffff"
      ></u-swiper>
    </view>
    <!-- 导航 -->
    <view class="nav u-flex">
      <navigator
        class="nav-item u-flex-1 u-p-20"
        v-for="item in navList"
        :key="item.name"
      >
        <u-image width="100%" mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>

    <view class="floor">
      <!-- 楼层标题 -->
      <view
        class="floor-group-title"
        v-for="floor in floorList"
        :key="floor.floor_title.name"
      >
        <u-image
          width="100%"
          mode="widthFix"
          :src="floor.floor_title.image_src"
        ></u-image>
        <!-- 内容 -->
        <view class="floor-group-content">
          <navigator v-for="product in floor.product_list" :key="product.name">
            <u-image
              width="100%"
              height="100%"
              mode="scaleToFill"
              :src="product.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    this.getSwiper();
    this.getNav();
    this.getFloor();
  },
  methods: {
    // 获取楼层数据
    async getFloor() {
      let res = await this.$u.get("/home/floordata");
      // console.log(res)
      this.floorList = res.message;
    },
    //获取导航栏
    async getNav() {
      let res = await this.$u.get("/home/catitems");
      //  console.log(res)
      this.navList = res.message;
    },
    //获取轮播图
    async getSwiper() {
      // 旧方法(未封装请求拦截器)
      // const [err,res]= await uni.request({
      // 		url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
      // 	})
      // 	// console.log(res)
      // 	this.swiperList=res.data.message

      let res = await this.$u.get("/home/swiperdata");
      // console.log(res)
      this.swiperList = res.message;
    },
  },
};
</script>

<style lang="scss">
.floor-group-content {
  navigator {
    width: 232rpx;
    height: 188rpx;
    float: left;
    margin-left: 15rpx;
    &:nth-child(1) {
      height: 386rpx;
    }
    &:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>
